<template>
	<view class="gallivant">
		<u-navbar :autoBack="true"></u-navbar>
		<view class="gallivantTop">
				<u-search placeholder="请输入" v-model="title" @search="searchTitle" @custom="customTitle"></u-search>
		</view>
		<view class="gallivantDiv">
			<view class="gallivantList" v-for="(item,index) in listData" :key="index" @click="goDetails(item)">
				<view class="gallivantImg">
					<img :src="item.photo[0]" alt="" />
				</view>
				<view class="gallivantListContent">
					<h2>{{item.title}}</h2>
					<view class="gallivantListContentlabel">
						<view class="gallivantListContentlabelitem" v-for="(it,ind) in item.label" :key="ind">
							{{it}}
						</view>
					</view>
					<view class="gallivantListContentaddress">
						<img src="/static/home/dingwei.png" alt="" />
						{{item.address}}
						<span v-if="item.distanceKm">{{item.distanceKm}} km</span>
					</view>
				</view>
			</view>
		</view>

		<view class="load-more" v-if="showLoading">
			<text>滑动到底部加载更多</text>
		</view>
		<view class="load-more" v-if="showNoMore">
			<text>没有更多数据了</text>
		</view>
	</view>
</template>

<script>
	import {
		scenerySelect
	} from '@/api/surroundings.js'
	export default {
		data() {
			return {
				title: '',
				type: '',
				lon: '',
				lat: '',
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总数据量
				isLoading: false, // 是否正在加载
				showLoading: false, // 显示加载中
				showNoMore: false, // 显示没有更多
				listData: []
			};
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type
			}
			this.getScenerySelect()
		},
		// 页面滚动到底部
		onReachBottom() {
			// 页面滚动到底部时触发
			if (this.listData.length < this.total) {
				this.pageSize += 10;
				this.getScenerySelect();
			} else if (this.listData.length >= this.total) {
				this.showNoMore = true;
				this.showLoading = false;
			}
		},
		methods: {
			// 跳转到详情
			goDetails(item) {
				uni.navigateTo({
					url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.id}&type=0`
				})
			},
			// 获取关联列表
			async getScenerySelect() {
				this.lon = this.$store.state.lonLat[0]
				this.lat = this.$store.state.lonLat[1]
				// 显示加载状态
				this.isLoading = true;
				this.showLoading = true;
				this.showNoMore = false;
				let par = {
					title: this.title,
					type: this.type,
					lon: this.lon ? this.lon : null,
					lat: this.lat ? this.lat : null,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				let res = await scenerySelect(par)
				if (res.code == 200) {
					const newData = res.data.records;
					this.total = res.data.total;
					// 合并数据
					if (this.pageNum == 1) {
						this.listData = newData;
					} else {
						this.listData = this.listData.concat(newData);
					}

					// 控制显示状态
					if (this.listData.length >= this.total) {
						this.showNoMore = true;
						this.showLoading = false;
					} else {
						this.showNoMore = false;
						this.showLoading = true;
					}
				} else {
					// 无论成功失败，都结束加载状态
					this.isLoading = false;
					this.showLoading = false;
				}
			},
			// 点击手机键盘搜索按钮
			searchTitle() {
				this.getdetailsIdList()
			},
			// 点击右侧的搜索按钮
			customTitle() {
				this.getdetailsIdList()
			},
		}
	}
</script>

<style lang="scss">
	.gallivant {
		width: 100%;
		height: 100vh;

		.gallivantDiv {
			padding: 0 30rpx;
			margin-top: 260rpx;
			border-radius: 20rpx;

			.gallivantList {
				width: 100%;
				padding: 20rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
				display: flex;
				gap: 20rpx;

				.gallivantListContent {
					.gallivantListContentaddress {
						display: flex;
						align-items: center;
						gap: 15rpx;
						font-size: 24rpx;
						color: #666;

						img {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.gallivantListContentlabel {
						display: flex;
						align-items: center;
						margin: 10rpx 0;
						gap: 10rpx;

						.gallivantListContentlabelitem {
							display: flex;
							align-items: center;
							padding: 5rpx 10rpx;
							border: 1rpx solid #3c9cff;
							font-size: 22rpx;
							color: #3c9cff;
							border-radius: 15rpx;
						}
					}
				}

				.gallivantImg {
					width: 200rpx;
					min-height: 200rpx;

					img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}

		.gallivantTop {
			width: 100%;
			padding: 0 30rpx 20rpx;
			padding-top: 140rpx;
			background-color: #ffffff;
			position: fixed;
			top: 0;
		}

		.load-more {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
		}

		/* 加载动画 */
		.loading-spinner {
			width: 30rpx;
			height: 30rpx;
			border: 3rpx solid #ccc;
			border-top-color: #333;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-right: 16rpx;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}

		::v-deep .u-status-bar,
		::v-deep .u-navbar__content {
			background: none !important;
		}
	}
</style>